<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				height: 100vh;
			}

			.Div_NavigationBar {
				position: sticky;
				top: 0;
				height: 40px;
				background-color: RGB(204, 242, 244);
				transition-duration: 0.5s;
				display: flex;
				justify-content: space-between;
				/* margin-bottom: 5px; */
				box-shadow: RGB(204, 242, 244) 0px 2px 10px 0px;
			}

			.ImageLogo {
				width: 50px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}

			.ReturnBut {
				display: none;
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
			}

			.Div_NavigationBar>ul {
				list-style: none;
				display: flex;
				justify-content: space-evenly;
				padding: 0;
				margin: 0;
				width: 70%;
				color: rgba(0, 0, 0, 0.7);
			}

			.Div_NavigationBar>ul>li {
				text-align: center;
				padding-top: 5px;
				line-height: 30px;
				min-width: 100px;
				border-bottom: 0px red solid;
				transition-property: 1s;
				cursor: pointer;
				height: 35px;
				overflow: hidden;
			}

			.Div_NavigationBar>ul>li:hover {
				height: 50px;
				overflow: visible;
				color: #000000;
			}

			.Div_NavigationBar>ul>li ul {
				margin: 0;
				padding: 0;
				list-style: none;
				box-shadow: #000000 0px 2px 5px -2px;
				border-top: 0;
				margin-top: 5px;
				border-radius: 10px;
				color: rgba(0, 0, 0, 0.7);
			}

			.Div_NavigationBar>ul>li li {
				width: 100%;
				text-align: center;
				background-color: rgb(244, 249, 249);
				font-size: 12px;
				transition-duration: 0.5s;
			}

			.Div_NavigationBar>ul>li li:first-child {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}

			.Div_NavigationBar>ul>li li:last-child {
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			.Div_NavigationBar>ul>li li:hover {
				background-color: rgb(164, 235, 243);
				color: #000000;
			}

			.NavigationBar_broder {
				width: 100px;
				border-bottom: 3px RGB(170, 170, 170) solid;
				position: fixed;
				top: 0px;
			}


			.Div_NavigationBarBox {
				width: 50px;
				height: 50px;
				float: right;
				background-color: #000000;
				display: none;
				cursor: pointer;
			}

			.Div_NavigationBarBox_menu {
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: rgba(244, 249, 249, 0.5);
				/* background-color: #000000; */
				transition-duration: 0.5s;
				display: none;
				opacity: 0;
			}

			.Div_NavigationBarBox_menu>ul {
				float: right;
				width: 180px;
				background-color: rgb(164, 235, 243);
				height: 100%;
				padding: 0;
				margin: 0;
				list-style: none;
				transition-duration: 0.5s;
				margin-right: -200px;
				color: rgba(0, 0, 0, 0.7);
			}

			.Div_NavigationBarBox_menu>ul>li {
				border-bottom: 2px solid rgba(170, 170, 170, 1);
				padding: 5px 0px 5px 20px;
				transition-duration: 0.5s;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				display: block;
				width: 100%;
				height: 25px;
			}

			.Div_NavigationBarBox_menu>ul>li ul {
				margin: 0;
				padding: 0;
				margin-top: 10px;
				background-color: rgb(204, 242, 244);
				margin-left: -20px;
				height: 0;
			}

			.Div_NavigationBarBox_menu>ul>li li {
				padding: 10px 5px;
				font-size: 12px;
				padding-left: 40px;
			}

			.Div_NavigationBarBox_menu>ul>li li:hover {
				background-color: rgb(244, 249, 249);
				color: #000000;
			}

			.titleText span {
				display: none;
				line-height: 50px;
				font-size: 20px;
				width: 100px;
				text-align: center;
				font-weight: 700;
			}

			#Home {
				width: 100%;
				z-index: 0;
				height: calc(100% - 40px);
				overflow: auto;
			}

			#Home>div {
				overflow: hidden;
				/* transition-duration: 1s; */
				opacity: 1;
				margin-top: 0px;
			}

			#Home01 {
				width: 100%;
				background-color: rgba(255, 255, 0, 0.2);
				display: none;
			}

			#Home02 {
				width: 100%;
				height: 200vh;
				background-color: rgba(255, 0, 0, 0.2);
				display: none;

			}

			#Home03 {
				width: 100%;
				height: 400px;
				background-color: rgba(0, 0, 0, 0.2);
				display: none;
			}

			@media screen and (max-width:700px) {

				.Div_NavigationBarBox,
				.ReturnBut {
					display: block;
				}

				.Div_NavigationBar {
					height: 50px;
				}

				.Div_NavigationBar ul,
				.ImageLogo,
				.NavigationBar_broder {
					display: none;
				}

				.titleText span {
					display: block;
				}

				#Home {
					height: calc(100% - 50px);
				}
			}
		</style>
	</head>
	<body style="overflow:auto ! important;">
		<div class="Div_NavigationBar">
			<div class="ImageLogo">
				我是logo
			</div>
			<div class="ReturnBut">
				返回
			</div>
			<ul>
				<li>
					<span>导航栏A</span>
					<ul>
						<li id="Src_Home01"><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
					</ul>
				</li>
				<li id="Src_Home02"><span>导航栏B</span></li>
				<li id="Src_Home03"><span>导航栏C</span></li>
				<li><span>导航栏D</span></li>
				<li><span>导航栏E</span></li>
			</ul>
			<div class="titleText">
				<span>标题</span>
			</div>
			<div class="Div_NavigationBarBox"></div>
		</div>
		<div class="NavigationBar_broder"></div>
		<div class="Div_NavigationBarBox_menu" style="">
			<ul>
				<li>
					<span>导航栏A</span>
					<ul>
						<li id="Src_Home01"><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
						<li><span>导航栏A1</span></li>
					</ul>
				</li>
				<li id="Src_Home02"><span>导航栏B</span></li>
				<li id="Src_Home03"><span>导航栏C</span></li>
				<li><span>导航栏D</span></li>
				<li><span>导航栏E</span></li>
			</ul>
		</div>

		<div id="Home">
			<div id="Home01">
				页面A
			</div>
			<div id="Home02">
				页面B
			</div>
			<div id="Home03">
				页面C
			</div>
		</div>
		

		<script src="./script/jquery-3.5.1.js"></script>
		<script src="./script/popmotion.global.min.js"></script>
		<script src="./script/NavigationBar/NavigationBar.js"></script>
		<script src="./script/NavigationBar/JumpView.js"></script>
		<script>
			
		</script>

	</body>
</html>
